<template>
<div class="home-container">
  <!-- 最新题库区域 -->
  <section class="section-container">
    <div class="page-header">
      <el-text class="title" size="large" tag="b">
        <el-icon class="icon">
          <Collection />
        </el-icon>
        最新题库
      </el-text>
      <div style="color: #409eff; font-size: small;" @click="router.push('/banks')">查看更多</div>
    </div>

    <el-skeleton :loading="bankLoading" animated :count="4" :throttle="500">
      <template #template>
        <el-row :gutter="16">
          <el-col v-for="i in 4" :key="i" :xs="24" :sm="12" :md="6" :lg="6">
            <el-skeleton-item variant="image" style="height: 120px" />
            <el-skeleton-item variant="h3" style="width: 70%; margin-top: 12px" />
            <el-skeleton-item variant="text" style="width: 90%" />
          </el-col>
        </el-row>
      </template>

      <template #default>
        <el-row :gutter="16">
          <el-col v-for="item in questionBanks" :key="item.id" :xs="24" :sm="12" :md="6" :lg="6">
            <el-card shadow="hover" class="bank-card" @click="router.push('/bank/' + item.id)">
              <div class="card-header">
                <el-avatar shape="square" :size="24" fit="cover" :src="item.picture" />
                <el-text class="bank-title" tag="b">{{ item.title }}</el-text>
              </div>
              <el-text type="info" class="bank-desc">{{ item.description }}</el-text>
            </el-card>
          </el-col>
        </el-row>
      </template>
    </el-skeleton>
  </section>

  <!-- 最新题目区域 -->
  <section class="section-container">
    <div class="page-header">
      <el-text class="title" size="large" tag="b">
        <el-icon class="icon">
          <List />
        </el-icon>
        最新题目
      </el-text>
      <div style="color: #409eff; font-size: small;" @click="router.push('/questions')">查看更多</div>
    </div>

    <el-skeleton :loading="questionLoading" animated :count="5" :throttle="500">
      <template #template>
        <div v-for="i in 5" :key="i" class="question-skeleton">
          <el-skeleton-item variant="h3" style="width: 40%" />
          <el-skeleton-item variant="text" style="width: 30%; margin-left: 20px" />
          <el-skeleton-item variant="text" style="width: 20%; margin-left: auto" />
        </div>
      </template>

      <template #default>
        <div class="question-list">
          <div v-for="item in questions" :key="item.id" class="question-item" @click="router.push('/question/' + item.id)">
            <el-text class="question-title">{{ item.title }}</el-text>
            <template v-for="(tag,index) in item.tagList" :key="index">
              <el-tag type="primary" effect="light">
                {{ tag }}
              </el-tag>
            </template>
          </div>
        </div>
      </template>
    </el-skeleton>
  </section>
</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { Collection, List } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
// 题库数据
const questionBanks = ref([])
const bankLoading = ref(true)
const bankError = ref(null)

// 题目数据
const questions = ref([])
const questionLoading = ref(true)
const questionError = ref(null)

// 获取题库数据
const fetchQuestionBanks = async () => {
try {
  const response = await axios.post('http://localhost:8121/api/questionBank/list/page/vo', {
    current: 0,
    pageSize: 10
  })
  questionBanks.value = response.data.data.records
} catch (err) {
  bankError.value = err.message || '题库加载失败'
} finally {
  bankLoading.value = false
}
}

// 获取题目数据
const fetchQuestions = async () => {
try {
  const response = await axios.post('http://localhost:8121/api/question/list/page/vo', {
    current: 0,
    pageSize: 10
  })
  questions.value = response.data.data.records
} catch (err) {
  questionError.value = err.message || '题目加载失败'
} finally {
  questionLoading.value = false
}
}


onMounted(() => {
  fetchQuestionBanks()
  fetchQuestions()
})
</script>

<style scoped>
.home-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.section-container {
background: white;
border-radius: 8px;
padding: 20px;
margin-bottom: 24px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.page-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;

.title {
  color: var(--el-color-primary);
  font-size: 18px;

  .icon {
    margin-right: 8px;
    vertical-align: -2px;
  }
}
}

.bank-card {
margin-bottom: 16px;
transition: transform 0.2s;

&:hover {
  transform: translateY(-3px);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;

  .bank-title {
    margin-left: 12px;
    font-size: 16px;
  }
}

.bank-desc {
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
}

.question-list {
border: 1px solid var(--el-border-color);
border-radius: 8px;

.question-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--el-border-color);
  transition: background 0.2s;

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    background: var(--el-color-primary-light-9);
  }

  .question-title {
    flex: 1;
    margin-right: 20px;
    font-size: 14px;
  }

  .el-tag {
    margin-left: 12px;
    min-width: 60px;
    text-align: center;
  }
}
}

.question-skeleton {
display: flex;
align-items: center;
padding: 16px;
border-bottom: 1px solid var(--el-border-color);
}
</style>